<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
      <el-form-item label="物资名称" prop="materialName">
        <el-input v-model="queryParams.materialName" @keyup.enter="getPage" />
      </el-form-item>
      <el-form-item label="物资规格" prop="materialSpecification">
        <el-input v-model="queryParams.materialSpecification" @keyup.enter="getPage" />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['material:info:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['material:info:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
        <el-button v-hasPermi="['material:category']" @click="handleClickCategory">
          物资类别
        </el-button>
      </el-form-item>
    </el-form>

    <Table
      :columns="columns"
      :page-param="queryParams"
      adaptive
      height-per="90"
      :page-data="queryData"
      save-key="MaterialInfo"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #menu="{ row }">
        <context-menu-item
          v-hasPermi="['material:info:update']"
          label="修改"
          @click="handleClickUpdate(row)"
        />
        <context-menu-item
          v-hasPermi="['material:info:delete']"
          label="删除"
          @click="handleClickDelete(row)"
        />
      </template>
      <template #disable="{ row }">
        {{ row.disable == 0 ? '否' : '是' }}
      </template>
    </Table>
  </ContentWrap>
  <MaterialCategory ref="categoryFormRef" />
  <MaterialInfoEdit ref="editFormRef" @success="getPage" />
</template>
<script setup name="MaterialInfo" lang="ts">
import * as materialInfoApi from '@/api/material/materialInfo'
import MaterialCategory from './MaterialCategory.vue'
import MaterialInfoEdit from './MaterialInfoEdit.vue'
const message = useMessage() // 消息弹窗
const categoryFormRef = ref()
const editFormRef = ref()
const queryFormRef = ref()
const queryData = ref()
const queryParams = ref({
  materialName: undefined,
  materialSpecification: undefined
})
const columns = [
  {
    label: '物资名称',
    prop: 'materialName'
  },
  {
    label: '物资类别',
    prop: 'category.categoryName'
  },
  {
    label: '物资规格',
    prop: 'materialSpecification'
  },
  {
    label: '基本单位',
    prop: 'unit'
  },
  {
    label: '是否停用',
    prop: 'disable',
    slot: 'disable'
  },
  {
    label: '销售单价',
    prop: 'price'
  },
  {
    label: '条码',
    prop: 'barcode'
  },
  {
    label: '物资描述',
    prop: 'materialDescribe'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]

onMounted(() => {
  getPage()
})

const handleClickSearch = () => {
  getPage()
}

const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

const handleClickCreate = () => {
  editFormRef.value.open('create', 0)
}

const handleClickUpdate = (row) => {
  editFormRef.value.open('update', row.id)
}

const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}

const handleClickDelete = async (row) => {
  await message.confirm('确定要删除此物资吗？')
  await materialInfoApi.deleted(row.id)
  getPage()
}

const handleClickCategory = () => {
  categoryFormRef.value.open()
}

const getPage = async () => {
  try {
    queryData.value = await materialInfoApi.pageQuery(queryParams.value)
  } finally {
  }
}
</script>
